<template>
    <div class="play-box w">
        <!-- 顶部播放盒子 -->
        <div class="top-box">
            <div class="top-content-box">
                <div class="left-play-box">
                    <video
                        :src="mvsPlayUrl"
                        autoplay
                        controls
                        controlslist="nodownload"
                    ></video>
                </div>
                <div class="right-tuijian-box">
                    <h1>相关视频</h1>
                    <div class="relatedMv-box">
                        <div
                            class="relatedMv-item"
                            v-for="item in mvRelatedList"
                        >
                            <div
                                class="img-box"
                                @click="jumpMvDetails(item.id)"
                            >
                                <img :src="item.cover" alt="" />
                                <div class="hidden-play">
                                    <img
                                        src="../../assets/images/btn-play.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div class="relatedMv-content">
                                <p>{{ item.name }}</p>
                                <p>{{ item.artistName }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mvInformation-box">
                <div class="mvText">
                    <div class="mvsName">
                        <h2>{{ mvInformation.name }}</h2>
                    </div>
                    <div class="mvsInformation">
                        <div class="playCount">
                            <p>播放次数：{{ mvInformation.playCount }}</p>
                        </div>
                        <div class="artistName">
                            <span
                                v-for="elem in mvInformation.artists"
                                :key="elem.id"
                                >{{ elem.name }}</span
                            >
                        </div>
                    </div>
                </div>
                <div class="focus-box">
                    <ul>
                        <li>
                            <i class="fa fa-heart-o">{{
                                mvLikeOrShare.likedCount
                            }}</i
                            ><span>收藏</span>
                        </li>
                        <li>
                            <i class="fa fa-share-alt">{{
                                mvLikeOrShare.shareCount
                            }}</i
                            ><span>分享</span>
                        </li>
                        <li>
                            <i class="fa fa-info-circle"></i
                            ><span>歌曲详情</span>
                        </li>
                        <li>
                            <i class="fa fa-exclamation-triangle"></i
                            ><span>举报</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 推荐mv盒子 -->
        <div class="personalizedMv-box">
            <h2>精选推荐</h2>
            <div class="personalizedMv">
                <div
                    class="personalized-Item"
                    v-for="item in personalizedMvList"
                >
                    <div class="img-box" @click="jumpMvDetails(item.id)">
                        <img :src="item.picUrl" alt="" />
                        <div class="mvs-info">
                            <div class="artisName">
                                {{ item.artistName }}
                            </div>
                            <div class="mvs-time">
                                {{ formatTime(item.duration) }}
                            </div>
                        </div>
                        <div class="msv-playCount">
                            <i class="el-icon-caret-right"></i>
                            <span>{{ item.playCount }}</span>
                        </div>
                        <div class="hidden-play">
                            <div class="hidden-play">
                                <img
                                    src="../../assets/images/btn-play.png"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                    <div class="mvs-content">
                        <p>{{ item.name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { lazyload, formatTime, debounce } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "mvDetails"
);
import "../../utils/font-awesome-4.7.0/css/font-awesome.min.css";

export default {
    data() {
        return {};
    },
    created() {
        this.mvsPrevY = 0;
        this.formatTime = formatTime;
        this.getMvDetail(this.$route.params._id);
        this.getMvUrl(this.$route.params._id);
        this.getMvRelated(this.$route.params._id);
        this.getMvDetailInfo(this.$route.params._id);
        this.getPersonalizedMv();
    },
    computed: {
        ...mapState([
            "mvsPlayUrl",
            "mvRelatedList",
            "mvInformation",
            "mvLikeOrShare",
            "personalizedMvList",
        ]),
    },
    methods: {
        ...mapActions([
            "getMvDetail",
            "getMvUrl",
            "getMvDetailInfo",
            "getMvRelated",
            "getPersonalizedMv",
            "getMvComments",
        ]),
        ...mapMutations([""]),
        jumpMvDetails(id) {
            this.$router.push("/home/mvDetails/" + id);
            this.getMvDetail(this.$route.params._id);
            this.getMvUrl(this.$route.params._id);
            this.getMvRelated(this.$route.params._id);
            this.getMvDetailInfo(this.$route.params._id);
            this.getMvComments(this.$route.params._id);
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/mvDetails/playBox.scss";
</style>